<template>
  <div class="wrapper">
    <el-row :gutter="32">
      <el-col :span="12" :push="direction === 'left' ? 0 : 12">
        <img class="img" alt="" :src="image" @click="continueReading" draggable="false"/>
      </el-col>
      <el-col :span="12" :pull="direction === 'left' ? 0 : 12" class="right">
        <h2 class="title">{{title}}</h2>
        <div class="authorWrapper">
          <span class="time">{{time}}</span>
          <span class="by">by</span>
          <span class="author">{{author}}</span>
        </div>
        <p class="content">{{content}}</p>
        <span class="btn" @click="continueReading" >Continue Reading...</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'PageBlogPart',
  props: {
    id: {
      request: true,
      type: String
    },
    image: {
      request: true
    },
    title: {
      request: true,
      type: String
    },
    time: {
      request: true,
      type: String
    },
    author: {
      request: true,
      type: String
    },
    content: {
      request: true,
      type: String
    },
    direction: {
      request: false,
      default: 'left',
      type: String,
      validator: (value) => {
        return ['left', 'right'].indexOf(value) !== -1
      }
    }
  },
  data () {
    return {
      loading: false
    }
  },
  methods: {
    continueReading () {
      const vm = this
      if (vm.loading) {
        return
      }
      vm.loading = true
      setTimeout(_ => {
        vm.loading = false
        vm.$message.success('id = ' + vm.id)
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{
    text-align: left;
    color: #999999;
    height: 360px;
    margin: 8px 16px;

    .img{
      width: 100%;
      height: 100%;
      cursor: pointer;
    }

    .right{
      height: 360px;
      padding: 16px;
      position: relative;

      .title{
        margin-bottom: 16px;
        color: #333333;
      }

      .authorWrapper{

        margin-bottom: 16px;
        user-select: none;

        span{
          font-size: 12px;
          color: #777777;
          display: inline-block;
        }

        .by{
          font-family: 'Lato', sans-serif;
          font-size: 16px;
          color: #777777;
        }

        .time{
          margin-right: 20px;
          cursor: pointer;
        }

        .author{
          margin-left: 10px;
          cursor: pointer;
        }

      }

      .content{
        font-size: 16px;
        margin-bottom: 15px;
        line-height: 24px;
      }

      .btn{
        user-select: none;
        cursor: pointer;
        padding: 4px;
        position: absolute;
        bottom: 32px;
        font-weight: 600;
       }

       .btn:hover{
         color: #333333;
       }

       .btn::after{
          display: block;
          content: "";
          height: 2px;
          width: 100%;
          opacity: 1;
          transition: .3s all linear;
          right: 0;
          bottom: 0;
          background: #999999;
          position: absolute;
       }

       .btn:hover::after{
         background: #333333;
         width: 50%;
       }

    }

  }

</style>
